<template>
  <div style="width:100vw;">
    <div>
      <!-- 返回按钮 -->
    </div>
    <div class="gradedetails-body">
      <div class="gradedetails-bg">
        <div v-for="(item,index) in ranks" :key="index" :style="ownRankId == item.rankId ? actived : ''" :class="('box'+(index+1))">{{item.rankName}}</div>
        <!-- <div class="box2">主任五级</div>
        <div class="box3">主任四级</div>
        <div class="box4">主任三级</div>
        <div class="box5">主任二级</div>
        <div class="box6">主任一级</div>
        <div class="box7">师三级</div>
        <div class="box8">师二级</div>
        <div class="box9">师一级</div>
        <div class="box10">助理</div> -->
      </div>
    </div>
  </div>
</template>
<script>
import { setText } from "../../untils/ddnavigate";
export default {
  name: "gradedetails",
  data() {
    return {
      ranks: [],
      ownRankId:'',
      actived:'color:#4787e3;font-weight:800;'
    };
  },
  mounted() {
    let that = this;
    let getFileDetails = JSON.parse(localStorage.getItem("getFileDetails"));
    that.ownRankId = getFileDetails.rankId;
    let params = {
      queue: getFileDetails.queue,
      sort: getFileDetails.sort
    };
    that.$get("getRank", params).then(res => {
      if (res.success) {
        that.ranks = res.data.ranks;
      }
    });
    setText("职级详情");
  }
};
</script>
<style lang="less" scoped>
@import url("~@/pagecss/gradedetails.less");
</style>